<template>
    <div class="MUser-list">
        <div class="MUser-name" v-for="(item,index) in curValue" :key="index">
            <my-icon class="user-icon" size="0.7rem" type="icon-people"></my-icon>
            <span class="MUser-fullName">{{ item.name }}</span>
            <my-icon class="user-del" v-if="!readOnly" @click="groupDel(item)" size="1.2rem"
                     type="icon-icon-test26"></my-icon>
        </div>
        <div class="MUser-chang" @click="onChange" v-if="!readOnly">
            <my-icon size="1rem" type="icon-jia"></my-icon>
        </div>
    </div>
    <RxEmpty v-if="readOnly && curValue.length==0"></RxEmpty>
</template>

<script>
import MForm from "../js/MForm";
import Dialog from "@/js/Dialog";
import RxEmpty from "@/components/RxEmpty"
export default {
    name: "MGroup",
    mixins: [MForm],
    components:{RxEmpty},
    data(){
        return {
            curValue:[]
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        getGroupId(config){
            let groupId = '' ;
            let {field,gridName,valMode,name}=config.orgGroupConfig;
            if (!field) {
                uni.showToast({
                    title:this.i18n('associatedFields','未配置关联字段！'),
                    duration: 2000,
                    icon:'error'
                });
                return 'no';
            }
            if(this.metadata.subTable && gridName == 'main'){//如果控件在子表里面，并且关联主表里面的控件
                groupId = this.formVm.data[field] ;
            }else {
                groupId = this.data[field];
            }
            if (!groupId) {
                uni.showToast({
                    title: this.i18n('relatedFields','关联字段')+`-${name}-`+this.i18n('NoChoice','没有选择！'),
                    duration: 2000,
                    icon:'error'
                });
                return 'no';
            }
            if (valMode == "double") {
                groupId = JSON.parse(groupId).value;
            }
            return groupId ;
        },
        getGroupConfig(){
            let obj={
                groupId:"",
                orgGroupType:this.metadata.options.orgGroupType
            }
            let config=this.metadata.options;
            //当前组织
            if(config.orgGroupType=='curOrg'){
                obj.groupId="curOrg";
            }else if(config.orgGroupType=='selOrg'){
                //指定组织
                obj.groupId=config.orgGroupConfig?JSON.parse(config.orgGroupConfig).value:"";
            }else if(config.orgGroupType=='allOrg'){
                //所有组织
                if(!config.orgGroupConfig.dimId){
                    obj.showDimId=true;
                }
                obj.dimId=config.orgGroupConfig.dimId || "1";
                obj.initRankLevel=config.orgGroupConfig.initRankLevel;
            }else if(config.orgGroupType=='relOrg'){
                //关联组织
                let _groupId = this.getGroupId(config);
                if(_groupId == 'no'){ return }
                obj.groupId = _groupId
            }else if(config.orgGroupType=='selDim'){
                obj.showDimId = true ;
                obj.dimId= config.orgGroupConfig.dimId;
                obj.initRankLevel=Number(config.orgGroupConfig.initRankLevel);
            }
            return obj;
        },
        onChange() {
            let { options:{single} } = this.metadata ;
            let config = this.getGroupConfig();
            if(!config){ return }
            let conf={
                data:{
                    single,
                    ...config,
                    initGroups:this.curValue
                },
                curVm:this
            };
            Dialog.openGroupDialog(conf,(data)=>{
                this.setGroupValue(data)
            })
        },
        groupDel(item){
            let idx = this.curValue.findIndex(obj=>obj.groupId === item.groupId)
            this.curValue.splice(idx,1);
            this.setGroupValue(this.curValue)
        },
        setGroupValue(data){
            if(data.length === 0){
                this.updateValue("")
                this.triggerEmitEvents('change', '', this.data)
            }else {
                let labelArr = [],valueArr = [] ;
                let {showDeptPath} = this.metadata.options ;
                for (let item of data){
                    labelArr.push(showDeptPath && item.pathName ?item.pathName:item.name)
                    valueArr.push(item.groupId)
                }
                let obj = {label:labelArr.join(','),value:valueArr.join(',')}
                this.updateValue(JSON.stringify(obj))
                this.triggerEmitEvents('change', JSON.stringify(obj), this.data)
            }
        },
        setGroupCurValue(val){
            if(!val){
                this.curValue = []
            }else {
                let obj = JSON.parse(val)
                if(!obj.label){
                    return
                }
                let labelArr = obj.label.split(',')
                let valueArr = obj.value.split(',')
                if(obj.value.length > 0){
                    let arr = []
                    valueArr.forEach((item,index)=>{
                        arr.push({
                            groupId:item,
                            name:labelArr[index]
                        })
                    })
                    this.curValue = arr ;
                }else {
                    this.curValue = []
                }
            }
        }
    },
    watch:{
        value:{
            handler(val){
                this.setGroupCurValue(val)
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>
.MUser-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.MUser-name {
    font-size: .7rem;
    border-radius: 8px;
    background: rgba(242, 242, 242, 1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 2.344rem;
    padding: 0rem 0.5rem;
    line-height: 2.344rem;
    display: flex;
    align-items: center;
    position: relative;
}

.MUser-fullName {

    font-weight: 500;
    letter-spacing: 0px;
    line-height: 19.6px;
    color: rgba(0, 0, 0, 0.65);
}

.user-icon {
    width:1.25rem;
    height:1.25rem;
    background: rgba(66, 133, 244, 1);
    display: flex;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 18px;
    text-align: center;
    margin-right: 0.2rem;
}

.user-del {
    position: absolute;
    right: -0.3rem;
    top: -1rem;
    color: rgba(255, 81, 81, 1);
}

.MUser-chang {
    width: 2.344rem;
    height: 2.344rem;
    line-height: 2.344rem;
    opacity: 1;
    border-radius: 8px;
    background: rgba(245, 246, 249, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);

}
</style>
